<template>
  <div class="app-container">
    <PartCategoryGraph :graphData="graphData" />
  </div>
</template>

<script>
import PartCategoryGraph from '@/components/partCategoryGraph.vue'; // 引入 D3.js 图形组件
import { getPartGraph, getPartCategoryGraph,listView } from "@/api/neo/graph"; // 引入接口方法

export default {
  name: "PartCategory",
  components: {
    PartCategoryGraph, // 注册组件
  },
  data() {
    return {
      graphData: {
        parts: [], // 零件节点数据
        categories: [], // 零件分类节点数据
        views:[]//零件视图
      },
    };
  },
  created() {
    this.getGraphData(); // 调用方法获取图形数据
  },
  methods: {
    /** 获取图形数据 */
    async getGraphData() {
      try {
        // 获取零件数据
        const partResponse = await getPartGraph();
        this.graphData.parts = partResponse.data;

        // 获取零件分类数据
        const categoryResponse = await getPartCategoryGraph();
        this.graphData.categories = categoryResponse.data;

        const partViewResponse = await listView();
        this.graphData.views = partViewResponse.data;
      } catch (error) {
        console.error('Failed to fetch graph data:', error);
      }
    },
  },
};
</script>

<style>
.app-container {
  width: 100%; /* 宽度占满父容器 */
  height: 900px; /* 设置明确的高度 */
}
</style>